<template>
  <view class="flex-col page">
    <view class="flex-col group_1">
      <view class="flex-col">
        <view class="flex-row section_1">
          <text class="text_1">原手机号</text>
          <input class="text_2" placeholder="请填写原手机号" v-model="oldPhone"/>
        </view>
        <view class="flex-col section_2">
          <view class="flex-row group_3">
            <text class="text_3">更换手机号</text>
			 <input class="text_4" placeholder="请填写要更换的手机号" v-model="newPhone" />
          </view>
          <view class="justify-between group_4">
            <view class="flex-row">
              <text class="text_5">验证码</text>
			  <input class="text_6" placeholder="请输入获取的验证码" v-model="code" />
            </view>
            <button class="text_7" :disabled="!smsCodeFlag" @click="getSmsCode()">{{ smsCodeFlag ? '获取验证码' :  smsCountDown+'s'}}</button>
          </view>
        </view>
      </view>
      <view class="flex-col items-center button" @click="submit"><text class="text_8">确定</text></view>
    </view>
  </view>
</template>

<script>
import {sendSmsCode, updatePhone} from '../../api/api.js'
  export default {
    components: {},
    data() {
      return {
        uid: null,
        phone: '',
        oldPhone: '',
        newPhone: '',
        smsCountDown: 60,
        smsCodeFlag: true,
        //发送短信验证码 默认abcd
        smsCode: 'abcd1234567',
        //用户输入验证码
        code: ''
      };
    },
    onLoad() {
      let data = {id: this.$store.state.userInfo.wxInfo.uid, phone: this.$store.state.userInfo.wxInfo.phone}
      console.log('data', data)
      this.uid = data.id
      this.phone = data.phone
      this.init()
    },
    methods: {
      init() {
      },
      getSmsCode() {
        if (this.oldPhone != this.phone) {
          uni.showToast({
            title: '旧手机号输入错误！',
            icon: 'none'
          })
          return
        }
        let reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        if (!reg.test(this.newPhone)) {
          uni.showToast({
            title: '请输入正确手机格式！',
            icon: 'none'
          })
          return
        }
        if (this.oldPhone == this.newPhone) {
          uni.showToast({
            title: '两次输入手机号相同！',
            icon: 'none'
          })
          return
        }
        sendSmsCode(this.newPhone).then(res => {
          this.smsCode = res.data.code
        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        })
        this.smsCodeFlag = false
        this.smsCountInterval = setInterval(() => {
          this.smsCountDown--;
          if (this.smsCountDown <= 0) {
            this.smsCodeFlag = true
            clearInterval(this.smsCountInterval);
          }
        }, 1000)
      },
      submit() {
        if (this.smsCode != this.code) {
          uni.showToast({
            title: '验证码输入错误！',
            icon: 'none'
          })
          return
        }
        let user = {
          uid: this.uid,
          phone: this.newPhone
        }
        updatePhone(user).then(res => {
          if (res.code == 200) {
            this.$store.state.userInfo.wxInfo.phone=this.newPhone
            console.log(this.$store.state.userInfo.wxInfo.phone);
            uni.showToast({
              title: '修改成功！',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
      }
    },
  };
</script>

<style scoped lang="css">
  .page {
    background-color: #f5f5f5;
    border-bottom: solid 0.28rem #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group_1 {
    padding: 0.97rem 0.88rem 2.72rem 0.94rem;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .button {
    margin-top: 22.44rem;
    padding: 0.91rem 0 0.88rem;
    background-color: #6d79fe;
    border-radius: 1.31rem;
  }
  .section_1 {
    padding: 0.91rem 1.09rem 0.94rem;
    background-color: #ffffff;
    border-radius: 0.47rem;
  }
  .section_2 {
    margin-top: 0.94rem;
    padding-left: 1rem;
    padding-right: 0.81rem;
    background-color: #ffffff;
    border-radius: 0.47rem;
  }
  .text_8 {
    color: #ffffff;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.84rem;
  }
  .text_1 {
    color: #666666;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
	margin-top: 15rpx;
  }
  .text_2 {
    margin-left: 1.13rem;
    margin-top: 0.13rem;
    color: #cbcbcb;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .group_3 {
    padding: 0.91rem 0.094rem;
    border-bottom: solid 0.031rem #e5e5e5;
  }
  .group_4 {
    padding: 0.88rem 0 0.91rem 0.063rem;
  }
  .text_3 {
    color: #666666;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
	margin-top: 15rpx;
  }
  .text_4 {
    margin-left: 1.09rem;
    margin-top: 0.13rem;
    color: #cbcbcb;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .text_7 {
    color: #6d79fe;
    font-size: 0.68rem;
    font-family: SourceHanSansCN;
  }
  .text_5 {
    color: #666666;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.81rem;
	margin-top: 15rpx;
  }
  .text_6 {
    margin-left: 1.16rem;
    margin-top: 0.13rem;
    color: #cbcbcb;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
</style>
